<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function randomColor(){
            let r = Math.floor( Math.random()*255 );
            let g = Math.floor( Math.random()*255 );
            let b = Math.floor( Math.random()*255 );
            return `rgb(${r},${g},${b})`;
        }

        // 元素的行内样式修改
        function changeColor(){
            // 1. 获取被操作的元素对应的DOM对象
            let dom1 = document.querySelector("#dom1");
            // console.log(dom1);
            // 2. 对元素进行相关操作 
            // 对元素的行样式进行操作
            //     dom.style 加载当前元素的行样式对象，所有行样式都存在于该对象的内部
            console.log(dom1.style);

            // 修改行内样式
            // dom1.style.color = "red";
            // dom1.style.color = "rgb(255,0,0)";
            dom1.style.color = randomColor();
            
            // 获取已经存在的行内样式
            console.log( dom1.style.border );
            
            // 设置背景色
            // dom1.style.background-color = randomColor();
            // 当样式名是由多个单词组成的 连字符规则，需要在使用时转换为驼峰规则
            dom1.style.backgroundColor = randomColor();
        }
    </script>
</head>
<body>
    <h1 id="dom1" style="border: 2px solid black;">页面元素</h1>
    <input type="button" value="改变颜色" onclick="changeColor()">
</body>
</html>